<template>
    <div class="swiper-demo">
        <nut-swiper ref="swiperRef" :is-stop-propagation="false" :is-prevent-default="false">
            <nut-swiper-item v-for="(item, index) in props.data" :key="index" style="height: 300px">
                <!-- <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" /> -->
                <div style="width: 100%;height: 100%;background-color: #3f3f3f;color: #fff;text-align: center;">
                    <div class="game-box">
                        <div class="game-item">
                            <div class="gImg">
                                <image-box :src="item.cover"></image-box>
                            </div>
                            <div class="game-info">
                                <div class="game-name">
                                    {{ item.name }}
                                    <span class="game-download-number">
                                        {{ item.download_num }}次下载
                                    </span>
                                </div>
                                <div class="game-desc">
                                    {{ item.description.slice(0,150) }}...
                                </div>
                                <div class="game-info-other">
                                    <p class="game-info-other-item">
                                        <span class="game-info-other-title">适配系统:</span>
                                        <span class="game-info-other-content">{{ item.os }}</span>
                                    </p>
                                    <p class="game-info-other-item">
                                        <span class="game-info-other-title">大小:</span>
                                        <span class="game-info-other-content">{{ item.size }}M</span>
                                    </p>
                                    <p class="game-info-other-item">
                                        <span class="game-info-other-title">类型:</span>
                                        <span v-for="(t,tIndex) in item.category_name" :key="tIndex" class="game-info-other-content tag-type" style="color: #8ee3ff;">{{ t }}</span>
                                    </p>
                                </div>
                                <div class="game-btn">
                                    <div class="download-btn" @click="linkTo('/gameDetail',item.id)">
                                        立即下载
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="game-img">
                            <div class="game-img-list">
                                <div v-for="(citem,cindex) in item.covers" :key="cindex" class="game-img-item">
                                    <image-box :src="citem"></image-box>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nut-swiper-item>
        </nut-swiper>
        <div class="swiper-btns">
            <div class="swiper-btn" @click="handlePrev">
                <left></left>
            </div>
            <div class="swiper-btn" @click="handleNext">
                <right></right>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref,defineProps,PropType} from 'vue'
import { Left, Right } from '@nutui/icons-vue'
import {useRouter} from 'vue-router'

export type GameTopType = GameTopInterface[]

export interface GameTopInterface {
    id: number
    category_ids: string
    name: string
    description: string
    cover: string
    covers: string[]
    download_url: any
    release_date: string
    size: string
    os: string
    download_num: number
    category_name: string[]
    is_favorite: boolean
}

const props = defineProps({
    data: {
        type: Array as PropType<GameTopType>,
        default: function () {
            return []
        }
    }
})

const swiperRef = ref()

const handlePrev = () => {
    swiperRef.value?.prev()
}
const handleNext = () => {
    swiperRef.value?.next()
}

const Router = useRouter()
const linkTo = (path: string,id: any) => {
    Router.push({path: path, query: {id}})
}

</script>

<style lang="scss" scoped>
.swiper-demo {
    position: relative;
    padding-top: 0;
    display: block;
}

.swiper-btns {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    justify-content: space-between;
}

.swiper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 30px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
}
.tag-type{
    margin-right: 10px;
}

.game-box {
    width: 100;
    // background-color: aqua;
    padding: 20px;

    .game-item {
        display: flex;

        .gImg {
            width: 120px;
            height: 200px;
            overflow: hidden;
            flex-grow: 0;
            min-width: 120px;
            background-color: aliceblue;
        }

        .game-info {
            flex-grow: 1;
            text-align: left;
            padding-left: 10px;

            .game-name {
                font-weight: 600;
            }

            .game-download-number {
                font-size: 12px;
                color: #a5a5a5;
                float: right;
            }

            .game-desc {
                font-size: 12px;
                line-height: 14px;
            }
        }


        .game-info-other {
            font-size: 13px;

            .game-info-other-item {
                // margin-bottom: 3px;

                .game-info-other-title {
                    display: inline-block;
                    width: 60px;
                }
            }
        }

        .game-btn {
            display: flex;
            justify-content: center;
            padding-top: 10px;

            .download-btn {
                width: 180px;
                background-color: #eb49a8;
                color: #fff;
                border-radius: 20px;
                height: 33px;
                font-size: 13px;
                font-weight: bold;
                line-height: 33px;
                text-align: center;
            }
        }
    }

    .game-img {
        padding-top: 10px;
    }

    .game-img-list {
        display: flex;
        column-gap: 8px;
        flex-direction: row;

        .game-img-item {
            flex: 1;
            height: 50px;
            background-color: aliceblue;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}
</style>
